<template>
    <div class="delivery-index">
        <div class="delivery-item">
            <div class="delivery-item__header flex row-between">
                <div class="nr weight-500">{{$t('快递发货')}}</div>
                <el-switch
                    v-model="form.is_express"
                    :active-value="1"
                    :inactive-value="0"
                    @change="handleChange($event,'is_express')"
                >
                </el-switch>
            </div>
            <div class="delivery-item__content flex row-between">
                <div class="muted">{{$t('启用快递发货后，买家下单可以选择快递发货')}}，由卖家安排快递送货上门</div>
                <div class="btns">
                    <el-button
                        type="text"
                        size="small"
                        @click="$router.push('/setting/delivery/freight')"
                    >{{$t('运费模版')}}</el-button>
                    <el-button
                        type="text"
                        size="small"
                        @click="$router.push('/setting/delivery/express')"
                    >{{$t('快递公司')}}</el-button>
                    <el-button
                        type="text"
                        size="small"
                        @click="$router.push('/setting/delivery/logistics')"
                    >{{$t('物流接口')}}</el-button>
                </div>
            </div>
        </div>
        <div class="delivery-item m-t-16">
            <div class="delivery-item__header flex row-between">
                <div class="nr weight-500">{{$t('上门自提')}}</div>
                <el-switch
                    v-model="form.is_selffetch"
                    :active-value="1"
                    :inactive-value="0"
                    @change="handleChange($event,'is_selffetch')"
                >
                </el-switch>
            </div>
            <div class="delivery-item__content flex row-between">
                <div class="muted">{{$t('启用上门自提后，买家下单可以选择就近门店自提点')}}，卖家需要确保指定的自提点商品库存充足。</div>
                <div class="btns">
                    <el-button
                        type="text"
                        size="small"
                        @click="$router.push('/selffetch/selffetch_shop')"
                    >{{$t('查看自提点')}}</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import { apideliveryWay, apideliveryWayset } from '@/api/setting/delivery'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
    components: {},
})
export default class DeliveryIndex extends Vue {
    form = {
        is_express: 0,
        is_selffetch: 0,
    }
    handleChange($event: number, type: 'is_express' | 'is_selffetch') {
        if (!$event && !this.form.is_express && !this.form.is_selffetch) {
            this.$message.warning(i18n.t('至少启用一种配送方式'))
            this.form[type] = 1

            return
        }
        apideliveryWayset(this.form)
    }
    getLogisticsConfig() {
        apideliveryWay().then((res) => {
            this.form = res
        })
    }
    created() {
        this.getLogisticsConfig()
    }
}
</script>
<style lang="scss" scoped>
.delivery-index {
    .delivery-item {
        border-radius: 8px;
        background-color: #fff;
        &__header {
            padding: 16px 24px;
            border-bottom: $--border-base;
        }
        &__content {
            padding: 8px 24px;
        }
    }
}
</style>
